<template>
  <com-page>
    <u-navbar placeholder autoBack :title="$t('pages_app_setting_language_language_msg_358a3ba1')" />
    <view class="com-cell" v-for="item in dataList" :key="item.name" @click="onChange(item)">
      <view class="com-cell__bd">{{ item.name }}</view>
      <u-icon v-if="language == item.value" name="checkmark-circle-fill" size="18" color="var(--color-primary)" />
    </view>
  </com-page>
</template>

<script>
import { changeLanguage } from '@/i18n'
export default {
  name: 'App-Language',
  data() {
    return {
      dataList: [
        {
          name: this.$t('pages_app_setting_language_language_msg_d688a3a4'),
          value: 'zh',
        },
        {
          name: 'English',
          value: 'en',
        },
      ],
      language: uni.getStorageSync('language'),
    }
  },
  methods: {
    onChange(item) {
      changeLanguage(item.value)
      uni.navigateBack({})
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .u-cell {
  background-color: $com-color-content-bg !important;
}
</style>
